<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="shortcut icon" href="./imgs/monkey_learn.jpg" type="image/x-icon">
  <title>Sunpine工作室</title>
  <style>
    /*.col,*/
    /*.col-8,*/
    /*.col-4,*/
    /*.col-3,*/
    /*.col-9 {*/
    /*    !*background: #aaa;*!*/
    /*    !*border: 1px solid #aaa;*!*/
    /*    !*padding: 10px;*!*/

    /*    box-shadow:darkgrey 0px 0px 10px*/
    /*}*/
    .carousel-item img {
      /*width: 1200px;*/
      height: 370px;
    }


  </style>
</head>
<body>

<nav class="">
  <div class="container-fluid">
    <div class="row">
      <div class="col shadow-sm">
        <nav class="navbar p-1 navbar-expand-lg navbar-light bg-light">
          <a class="navbar-brand navbar-toggler" href="#">Navbar</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse"
                  data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                  aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"><span
                  style="font-size: 25px;color: red; text-shadow: 5px 5px 5px black, 0px 0px 2px black; ">Sunpine</span>&nbsp;&nbsp;首页
                  <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">作品展示</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">课程设计原则</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">课程介绍</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">课程特点</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">学员目标技能要求</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">适合人群</a>
              </li>

              <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  笔试题
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="./docs/20200116_java_test_answer.pdf"
                     target="_blank">2020.1.16注释阶段笔试题（答案）</a>
                  <a class="dropdown-item" href="#">Another action</a>
                  <div class="dropdown-divider"></div>
                  <a class="dropdown-item" href="#">Something else here</a>
                </div>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="./chose_index.html" target="_bl">抽奖区</a>
              </li>
              <!--<li class="nav-item">
                <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
              </li>-->
            </ul>
            <form class="form-inline my-2 my-lg-0">
              <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
      </div>
    </div>
  </div>
</nav>
<section class="">
  <div class="container-fluid">
    <div class="row">
      <!-- <div class="col-3 d-flex justify-content-around align-items-center">产品</div>-->

      <div class="col">
        <!--轮播start-->
<!--        <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">-->
<!--          <ol class="carousel-indicators">-->
<!--            <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>-->
<!--            <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>-->
<!--            <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>-->
<!--          </ol>-->

<!--          <div class="carousel-inner">-->

<!--            <div class="carousel-item  active">-->
<!--              <img src="./imgs/lz3.jpg" class="img-fluid w-100" alt="...">-->
<!--              <div class="carousel-caption d-none d-md-block">-->
<!--                <h5>First slide label</h5>-->
<!--                <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="carousel-item">-->
<!--              <img src="./imgs/lz2.jpg" class="img-fluid w-100" alt="...">-->
<!--              <div class="carousel-caption d-none d-md-block">-->
<!--                <h5>Second slide label</h5>-->
<!--                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="carousel-item">-->
<!--              <img src="./imgs/lz3.jpg" class="img-fluid w-100" alt="...">-->
<!--              <div class="carousel-caption d-none d-md-block">-->
<!--                <h5>Third slide label</h5>-->
<!--                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>-->
<!--              </div>-->
<!--            </div>-->

<!--            <div class="carousel-item">-->
<!--              <img src="./imgs/lz4.png" class="img-fluid w-100" alt="...">-->
<!--              <div class="carousel-caption d-none d-md-block">-->
<!--                <h5>Third slide label</h5>-->
<!--                <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">-->
<!--            <span class="carousel-control-prev-icon" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Previous</span>-->
<!--          </a>-->
<!--          <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">-->
<!--            <span class="carousel-control-next-icon" aria-hidden="true"></span>-->
<!--            <span class="sr-only">Next</span>-->
<!--          </a>-->
<!--        </div>-->
        <!--轮播end-->
      </div>
    </div>
  </div>
</section>
<section class="mt-3">
  <div class="container-fluid">
    <div class="row">
      <div class="col-3 d-flex justify-content-around shadow p-3 mb-5 bg-white rounded">
        <nav class="nav flex-column">
          <a class="nav-link active" href="#">Java基础</a>
          <a class="nav-link" href="#">数据结构算法</a>
          <a class="nav-link" href="#">H5前端</a>
          <a class="nav-link" href="#">Linux</a>
          <a class="nav-link" href="#">JavaEE基础</a>
          <a class="nav-link" href="#">JavaEE框架</a>
          <a class="nav-link" href="#">微服务分布式</a>
          <a class="nav-link" href="#">NoSQL</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </nav>
      </div>
      <div class="col-9 shadow p-3 mb-5 bg-white rounded">
        <!--content start-->


        <div class="container-fluid">

          <div class="row">
            <div class="col text-center">
              <h4>作品二维码</h4>
            </div>
          </div>

          <div class="row">
            <!--作品1-->
            <div class="ml-2 col-sm-12 col-md mt-5">
              <div class="card">
                <img src="./imgs/sunpine_QR.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">教程测试CRUD项目</h5>
                  <p class="card-text">
                    RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring
                    Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
                    项目地址:http://vue.ruoyi.vip/</a></br>
                  </p>
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    技术选型：
                    1、系统环境

                    Java EE 8
                    Servlet 3.0
                    Apache Maven 3
                    2、主框架

                    Spring Boot 2.2.x
                    Spring Framework 5.2.x
                    Spring Security 5.2.x
                    3、持久层

                    Apache MyBatis 3.5.x
                    Hibernate Validation 6.0.x
                    Alibaba Druid 1.2.x
                    4、视图层

                    Vue 2.6.x
                    Axios 0.21.0
                    Element 2.14.x
                    #内置功能
                  </li>
                  <li class="list-group-item">
                    项目地址：<a href="http://vue.ruoyi.vip/" target="_blank">若依前后端分离项目</a><br/>账号密码：admin/admin123
                  </li>
                </ul>
                <div class="card-body">
                  <a href="#" class="card-link">作者主页：展云鹏</a>
                </div>
              </div>
            </div>

            <!--作品2-->
            <div class="ml-2 col-sm-12 col-md mt-5">
              <div class="card">
                <img src="./imgs/sunpine_QR.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">学籍管理项目</h5>
                  <p class="card-text">
                    RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring
                    Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
                    项目地址:http://vue.ruoyi.vip/</a></br>
                  </p>
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    技术选型：
                    1、系统环境

                    Java EE 8
                    Servlet 3.0
                    Apache Maven 3
                    2、主框架

                    Spring Boot 2.2.x
                    Spring Framework 5.2.x
                    Spring Security 5.2.x
                    3、持久层

                    Apache MyBatis 3.5.x
                    Hibernate Validation 6.0.x
                    Alibaba Druid 1.2.x
                    4、视图层

                    Vue 2.6.x
                    Axios 0.21.0
                    Element 2.14.x
                    #内置功能
                  </li>
                  <li class="list-group-item">
                    项目地址：<a href="http://vue.ruoyi.vip/" target="_blank">若依前后端分离项目</a><br/>账号密码：admin/admin123
                  </li>
                </ul>
                <div class="card-body">
                  <a href="#" class="card-link">作者主页：周平</a>
                </div>
              </div>
            </div>

            <!--作品3-->
            <div class="ml-2 col-sm-12 col-md mt-5">
              <div class="card">
                <img src="./imgs/sunpine_QR.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">网吧管理项目</h5>
                  <p class="card-text">
                    RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring
                    Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
                    项目地址:http://vue.ruoyi.vip/</a></br>
                  </p>
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    技术选型：
                    1、系统环境

                    Java EE 8
                    Servlet 3.0
                    Apache Maven 3
                    2、主框架

                    Spring Boot 2.2.x
                    Spring Framework 5.2.x
                    Spring Security 5.2.x
                    3、持久层

                    Apache MyBatis 3.5.x
                    Hibernate Validation 6.0.x
                    Alibaba Druid 1.2.x
                    4、视图层

                    Vue 2.6.x
                    Axios 0.21.0
                    Element 2.14.x
                    #内置功能
                  </li>
                  <li class="list-group-item">
                    项目地址：<a href="http://vue.ruoyi.vip/" target="_blank">若依前后端分离项目</a><br/>账号密码：admin/admin123
                  </li>
                </ul>
                <div class="card-body">
                  <a href="#" class="card-link">作者主页：李东绍</a>
                </div>
              </div>
            </div>

            <!--作品4-->
            <div class="ml-2 col-sm-12 col-md mt-5">
              <div class="card">
                <img src="./imgs/sunpine_QR.png" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">健康管理项目</h5>
                  <p class="card-text">
                    RuoYi-Vue 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring
                    Security、MyBatis、Jwt、Vue），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源，支持分布式事务。
                    项目地址:http://vue.ruoyi.vip/</a></br>
                  </p>
                </div>
                <ul class="list-group list-group-flush">
                  <li class="list-group-item">
                    技术选型：
                    1、系统环境

                    Java EE 8
                    Servlet 3.0
                    Apache Maven 3
                    2、主框架

                    Spring Boot 2.2.x
                    Spring Framework 5.2.x
                    Spring Security 5.2.x
                    3、持久层

                    Apache MyBatis 3.5.x
                    Hibernate Validation 6.0.x
                    Alibaba Druid 1.2.x
                    4、视图层

                    Vue 2.6.x
                    Axios 0.21.0
                    Element 2.14.x
                    #内置功能
                  </li>
                  <li class="list-group-item">
                    项目地址：<a href="http://vue.ruoyi.vip/" target="_blank">若依前后端分离项目</a><br/>账号密码：admin/admin123
                  </li>
                </ul>
                <div class="card-body">
                  <a href="#" class="card-link">作者主页：杨艳斌</a>
                </div>
              </div>
            </div>

          </div>
        </div>


      </div>
    </div>
    <!--                content end-->
  </div>

</section>

<footer class="mt-1 ">
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12 col-md">
        <div class="p-2 bd-highlight">
          <figure style="position: relative;top:-50px">
            <img src="./imgs/monkey_learn.jpg" style="width: 150px;height: 150px;"/>
          </figure>
        </div>
        <div class="p-2 bd-highlight">
          学习猿地根据IT方向的线上学习特点，研发人机互动教学系统， 打造领先的学习模式。平台签约了十名大牛联合创办，
          每个合伙人再召集几名身边的技术大咖，根据程序员的岗位需求研发精品课程，并将一门学科中所需要的全部学习资料汇总在一起， 且实时更新。选中一门课程即拥有全部的精品学习资源，不需要再找其它资源补充，
          按计划学习结束后即可直接从事对应的开发工作。
        </div>
      </div>
      <div class="col-sm-12 col-md">
        <div class="p-2 bd-highlight">新手指南</div>
        <div class="p-2 bd-highlight">挑选课程</div>
        <div class="p-2 bd-highlight">购买课程</div>
        <div class="p-2 bd-highlight">学习课程</div>
        <div class="p-2 bd-highlight">配套资源</div>
      </div>
      <div class="col-sm-12 col-md">
        <div class="p-2 bd-highlight">帮助中心</div>
        <div class="p-2 bd-highlight">常见问题</div>
        <div class="p-2 bd-highlight">问答帮助</div>
        <div class="p-2 bd-highlight">学猿反馈</div>
      </div>
      <div class="col-sm-12 col-md">
        <div class="p-2 bd-highlight">关于我们</div>
        <div class="p-2 bd-highlight">了解我们</div>
        <div class="p-2 bd-highlight">企业文化</div>
        <div class="p-2 bd-highlight">联系我们</div>
      </div>
      <div class="col-sm-12 col-md">
        <div class="p-2 bd-highlight">
          <img src="./imgs/sunpine_QR.png" width="150px" height="150px"/>
        </div>
      </div>
    </div>
    <div class="row p-1">
      <div class="col">
        <div class="d-flex justify-content-start align-items-center">
          <div class="text-muted">
            友情链接： 知识社区 学Java Python开发 三皇垚画室 光伏文库 广东教师资格证报名 PHP培训 java培训 企业培训 作文培训加盟 少儿英语加盟 合川招聘网 智校云 GO语言培训
            融职教育 IT学院
          </div>
        </div>
      </div>
    </div>
    <div class="row p-1">
      <div class="col">
        <div class="d-flex justify-content-center align-items-center">
          <div class="text-muted">
            &copy;<i>2021-2025</i>&nbsp;&nbsp;Sunpine工作室版权所有
          </div>
        </div>
      </div>
    </div>
  </div>
</footer>


<script src="js/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>

<script>
    $(document).ready(function () {

        $(".nav-item").on("click", function () {
            let main_content = "";
            var thisText = $(this).text();
            if (thisText) {
                if (thisText.indexOf("原则") > -1) {
                    main_content += "java基础：\n" +
                        "\n" +
                        "面相对象，核心类库，设计模式，常用数据结算法\n" +
                        "\n" +
                        "数据库：\n" +
                        "\n" +
                        "SQL语句使用，表结构设计原则，索引原理原则\n" +
                        "\n" +
                        "H5前端：\n" +
                        "\n" +
                        "JavaScript Es6,css3,jquery,vue\n" +
                        "\n" +
                        "Linux服务器：\n" +
                        "\n" +
                        "linux常用命令,vi,mysql,nginx,redis安装使用\n" +
                        "\n" +
                        "JavaEE基础：\n" +
                        "\n" +
                        "servlet,thymeleaf,ajax,网络ISO模型原理\n" +
                        "\n" +
                        "JavaEE框架：\n" +
                        "\n" +
                        "restful设计应用,springmvc,mybatis,mybatisplus\n" +
                        "\n" +
                        "微服务分布式：\n" +
                        "\n" +
                        "mavne,springboot,springcloud基本架构\n" +
                        "\n" +
                        "NoSQL技术：\n" +
                        "\n" +
                        "nosql概念,redis使用";
                } else if (thisText.indexOf("介绍") > -1) {
                    main_content += "1.掌握所有Java、数据库、前端、JavaEE开发的高级技能，积累项目开发经验。\n" +
                        "\n" +
                        "2.通过MySQL、Redis等数据库服务器的学习，熟悉维护、优化、安全设置的使用，精通SQL编写和数据库设计，掌握数据库端设计和开发能力。\n" +
                        "\n" +
                        "3.通过JavaScript、jQuery、BootStrap、Vue和H5/CSS3等技术的学习，可以承担前端工程师的工作、制作出精美的、用户体验度高，交互良好的网页。\n" +
                        "\n" +
                        "4.通过SSM等框架技术的学习，可以提高开发效率和软件质量。\n" +
                        "\n" +
                        "5.通过Dubbo、Zookeeper、SpringBoot、SpringCloud等集成框架的学习，可以快速搭建稳定性高、扩展性好的软件。\n" +
                        "\n" +
                        "6.培养出有职业素养和能力的、符合企业需求的Java开发工程师。\n" +
                        "\n" +
                        "7.使用Java常用互联网技术可以独立完成系统开发工作，对现有的成熟产品进行二次开发，团队合作完成企业级项目的设计与开发，产品的测试与部署和维护等。";
                }
            }
            $("#main_content").html(main_content);
        });
    })
</script>
</body>
</html>